<template>
    <div  v-show="isLoading" class="loading">

      <div class="loading_div">
        <div class="loadEffect">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "module",
    data() {
      return {}
    },
    props: {
      isLoading: {
        type: Boolean,
        default: false
      },//图片宽
    },
    methods:{

    },
    created:function () {

    }
  }
</script>

<style lang="scss" scoped>

    .loading{
      position: fixed;
      width: 100%;
      height: 100%;
      min-height: 100%;
      top:0;
      bottom:0;
      background-color: rgba(0, 0, 0, 0.7);
      text-align: center;
      z-index: 1000000;
      .loading_div{
        position: relative;
        top:40%;
        left: 35%;
        width: 30%;
        height: 15%;
        /*background-color: red;*/
        .loadEffect{
          width: 100px;
          height: 100px;
          position: relative;
          margin: 0 auto;

          @-webkit-keyframes load{
            0%{
              -webkit-transform: scale(1.2);
              opacity: 1;
            }
            100%{
              -webkit-transform: scale(.3);
              opacity: 0.5;
            }
          }
          span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
          }
          span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-10px;
            -webkit-animation-delay:0.13s;
          }
          span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
          }
          span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -10px;
            -webkit-animation-delay:0.39s;
          }
          span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
          }
          span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-10px;
            -webkit-animation-delay:0.65s;
          }
          span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
          }

          span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -10px;
            -webkit-animation-delay:0.91s;
          }

          span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
          }

        }

      }




    }


</style>
